import React, { Component } from 'react'
import { NavBar, Toast } from 'antd-mobile'
import { Link } from 'react-router-dom'
import HouseItem from '../../components/HouseItem/index.js'
import NoHouse from '../../components/NoHouse/index.js'
import request from '../../utils/api.js'
import styles from './index.module.css'

const BASE_URL = 'http://localhost:8080'
export default class Rent extends Component {
    state = {
        // 出租房屋列表
        list: []
    }

    // 获取已发布房源的列表数据
    async getHouseList() {
        // 组件开始加载时进行提示
        Toast.loading('正在加载...', 0, null, false)

        const res = await request({
            method: 'get',
            url: '/user/houses'
        })
        const { status, body } = res
        if (status === 200) {
            // 如果请求成功，就显示列表页面
            this.setState({
                list: body
            })
            // 隐藏加载提示
            Toast.hide()
        } else {
            // 跳转到登录页面
            const { history } = this.props
            history.replace('/login')
            // 隐藏加载提示
            Toast.hide()
        }
    }

    componentDidMount() {
        this.getHouseList()
    }

    renderHouseItem() {
        const { list } = this.state
        const { history } = this.props

        return list.map(item => {
            return (
                <HouseItem
                    key={item.houseCode}
                    onClick={() => {
                        // 点击后跳转到房源详情页面
                        history.push(`/detail/`, {
                            id: item.houseCode
                        })
                    }}
                    houseImg={item.houseImg}
                    title={item.title}
                    desc={item.desc}
                    tags={item.tags}
                    price={item.price}
                />
            )
        })
    }

    renderRentList() {
        const { list } = this.state
        const hasHouses = list.length > 0

        if (!hasHouses) {
            return (
                <NoHouse>
                    您还没有房源，
                    <Link to="/rent/add" className={styles.link}>
                        去发布房源
                    </Link>
                    吧~
                </NoHouse>
            )
        }

        return <div className={styles.houses}>{this.renderHouseItem()}</div>
    }

    render() {
        const { history } = this.props
        return (
            <div className={styles.root}>
                <NavBar
                    rightContent={
                        <span onClick={() => {
                            // 点击之后跳转到发布房源页面
                            this.props.history.push('/rent/add')
                        }}>+</span>
                    }
                    className={styles.navHeader}
                    mode="dark"
                    onLeftClick={() => history.go(-1)}
                >
                    房屋管理
                </NavBar>
                {this.renderRentList()}
            </div>
        )
    }
}